---
layout: default
---

<section class="section">
  <div class="container">
    <h1 class="title is-1">{{ page.title }}</h1>

    <div class="buttons">
      <button class="button set-tool-mode is-primary" data-action="Active">
        Active
      </button>
      <button class="button set-tool-mode" data-action="Passive">
        Passive
      </button>
      <button class="button set-tool-mode" data-action="Enabled">Enable</button>
      <button class="button set-tool-mode" data-action="Disabled">
        Disable
      </button>
    </div>

    <div class="cornerstone-element-wrapper">
      <div
        id="cornerstone-element"
        class="cornerstone-element"
        data-index="0"
        oncontextmenu="return false"
      ></div>
    </div>

    {{ content }}
  </div>
</section>

<script>
  const baseUrl =
    window.ENVIRONMENT === 'development'
      ? 'http://127.0.0.1:4000/'
      : 'https://tools.cornerstonejs.org/examples/';

  _initCornerstone();
  _initInterface();

  const element = document.querySelector('.cornerstone-element');

  // Init CornerstoneTools
  cornerstoneTools.init();
  cornerstone.enable(element);
  const toolName = '{{ page.toolName }}';
  const imageIds = [];

  for (let i = 1; i < 38; i++) {
    imageIds.push(
      'wadouri:' + baseUrl + 'assets/dicom/bellona/chest_lung/' + i + '.dcm'
    );
  }

  const stack = {
    currentImageIdIndex: 0,
    imageIds: imageIds,
  };

  element.tabIndex = 0;
  element.focus();

  cornerstone.loadImage(imageIds[0]).then(function(image) {
    cornerstone.displayImage(element, image);
    cornerstoneTools.addStackStateManager(element, ['stack']);
    cornerstoneTools.addToolState(element, 'stack', stack);
  });

  // Add the tool
  const apiTool = cornerstoneTools[`${toolName}Tool`];
  cornerstoneTools.addTool(apiTool);
  cornerstoneTools.setToolActive(toolName, { mouseButtonMask: 1 });

  /***************************************************************************
   * UI & Boilerplate setup code
   **************************************************************************/

  /***
   *
   *
   */
  function _initCornerstone() {
    // Externals
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
    cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
    cornerstoneTools.external.cornerstone = cornerstone;
    cornerstoneTools.external.Hammer = Hammer;

    // Image Loader
    const config = {
      webWorkerPath: `${baseUrl}assets/image-loader/cornerstoneWADOImageLoaderWebWorker.js`,
      taskConfiguration: {
        decodeTask: {
          codecsPath: `${baseUrl}assets/image-loader/cornerstoneWADOImageLoaderCodecs.js`,
        },
      },
    };
    cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
  }

  /***
   *
   *
   */
  function _initInterface() {
    const handleClick = function(evt) {
      const action = this.dataset.action;
      const options = {
        mouseButtonMask:
          evt.buttons || convertMouseEventWhichToButtons(evt.which),
      };

      cornerstoneTools[`setTool${action}`](toolName, options);

      // Remove active style from all buttons
      const buttons = document.querySelectorAll('.set-tool-mode');
      buttons.forEach(btn => {
        btn.classList.remove('is-primary');
      });

      // Add active style to this button
      this.classList.add('is-primary');

      evt.preventDefault();
      evt.stopPropagation();
      evt.stopImmediatePropagation();
      return false;
    };

    const buttons = document.querySelectorAll('.set-tool-mode');

    buttons.forEach(btn => {
      btn.addEventListener('contextmenu', handleClick);
      btn.addEventListener('auxclick', handleClick);
      btn.addEventListener('click', handleClick);
    });
  }

  const convertMouseEventWhichToButtons = which => {
    switch (which) {
      // no button
      case 0:
        return 0;
      // left
      case 1:
        return 1;
      // middle
      case 2:
        return 4;
      // right
      case 3:
        return 2;
    }
    return 0;
  };
</script>
